<template>
  <BaseDialog v-if="isOpen" root="#app" :close-action="close">
    <template #default>
      <div class="content gap-col-16">
        <p class="font-weight-500 font-size-16 line-height-140 text-center px-2">{{ $t(currentJourney.title) }}</p>
        <p class="font-weight-400 font-size-14 line-height-125 text-center">{{ $t(currentBrowser.subtitle) }}</p>
        <div class="swipe-wrapper">
          <Swipe loop>
            <SwipeItem v-for="({ info, image, position }, index) in currentBrowser.steps" :key="index">
              <div class="step gap-col-16">
                <div class="image-wrapper">
                  <img :src="image" :alt="info" />
                  <div class="ping" :style="{ ...position }"></div>
                </div>
                <p class="font-weight-400 font-size-14 line-height-125 text-center">{{ $t(info) }}</p>
              </div>
            </SwipeItem>
            <template #indicator="{ active, total }">
              <div class="index-circle gap-row-5">
                <div v-for="(_, i) in total" class="circle" :class="{ active: active === i }" :key="i"></div>
              </div>
            </template>
          </Swipe>
        </div>
        <p class="font-weight-500 font-size-12 line-height-140 text-primary text-center" @click="onSwitchTo">
          {{ $t(currentJourney.switchTo.text) }}
        </p>
      </div>
    </template>
  </BaseDialog>
</template>
<script setup>
import { Swipe, SwipeItem } from 'vant'
import 'vant/lib/swipe/index.css'
import { storeToRefs } from 'pinia'
import { useInstallTutorStore } from '@/store/install-tutor'
import BaseDialog from './BaseDialog.vue'

const installTutorStore = useInstallTutorStore()
const { isOpen, currentBrowser, currentJourney } = storeToRefs(installTutorStore)
const { close, to } = installTutorStore

function onSwitchTo() {
  to(currentJourney.value.switchTo.state)
}
</script>
<style scoped lang="scss">
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.index-circle {
  width: 100%;
  padding-top: 1rem;

  display: flex;
  justify-content: center;

  .circle {
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 0.4375rem;
    background: rgb(var(--v-theme-gray-x));
    opacity: 0.75;

    &.active {
      background: #fff;
      opacity: 1;
    }
  }
}

.step {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;

  .image-wrapper {
    position: relative;

    img {
      max-width: 10rem;
      max-height: 20.125rem;
    }
  }
}

.swipe-wrapper {
  max-width: 16.75rem;
  position: relative;
}
</style>
